/** 吉他谱 */
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import MusicScoreRowCard from '../../components/musicScoreRowCard';
import FooterItem from '../../components/footerItem';
import CustomPagination from '../../components/customPagination';
import HotSearch from '../../components/hotSearch'
import styles from './style.module.scss';
import {actionCreators , actionTypes} from './store'
class ScoreSearch extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            // 页码
            current: 1,
            // 1 吉他谱 2尤克里里
            activeIndex: 1,
            // 仓库 保存一开始的搜索文本
            depotText: '',
            // 仓库 保存一开始的搜索类型
            depotCategory: 1,
            // 是否为head搜索的
            headSearch: false
        }
    }
    render() {
        const { scoreTotal, musicScore } = this.props;
        const { current , headSearch} = this.state;
        return (
            <div className={styles['guitar-score']}>
                <div className={styles['guitar-container']}>
                    {
                        (()=>{
                            if ( (musicScore && musicScore.length) || !headSearch ) {
                                return( 
                                    <div className={styles['container']}>
                                        <div className={styles['score-head']}>
                                            <div className={styles['search-tile']}>共 {scoreTotal} 条结果</div>
                                            <div className={styles['search-type']}>
                                                <span className={this.state.activeIndex === 1 ? styles['search-type-active'] : ''} onClick={this.handleSwitchType.bind(this,1,1)}>吉他谱</span>
                                                <span className={this.state.activeIndex === 2 ? styles['search-type-active'] : ''} onClick={this.handleSwitchType.bind(this,2,1)}>尤克里里</span>
                                            </div>
                                        </div>
                                        <div className={styles['music-score-card']}>
                                            <div className={styles['card-container']}>
                                                {
                                                    musicScore.map( (item , index) => {
                                                        return (
                                                            <div className={styles['card-list']} key={JSON.stringify(item)+index}>
                                                                <MusicScoreRowCard state={1} data={item}/>
                                                            </div>
                                                        )
                                                    })
                                                }
                                            
                                            </div>
                                        </div>
                                        <div className={styles['score-pagination']}>
                                            <CustomPagination current={current} total={scoreTotal} pageSize={20} onChange={this.handleChange.bind(this)}/>
                                        </div>
                                    </div>
                                ) 
                            } else {
                                return (
                                    <div className={`${styles['container']} ${styles['search-container']}`}>
                                        <div className={styles['score-default']}>
                                            <img src="https://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/matter/image/img_search_empty%402x.png" alt="无结果"/>
                                            <div className={styles['feedback']}>搜索君没有任何发现，试试其他关键词或者给 <a href="javascript:void(0)" onClick={this.openSdk.bind(this)}>小悦客服</a> 求助吧</div>
                                        </div>
                                    </div>
                                )
                            }
                        })()
                    }
                    
                    <div className={styles['top-spot']}>
                        <div><HotSearch/></div>
                    </div>
                    
                </div>
                <FooterItem/>
            </div>
        )
    }
    /**
     *  分页器发生改变时
     * @param {int} page 分页器当前页
     */
    handleChange (page) {
        // 获取 隐藏的路由 参数
        const { searchText } = this.props.history.location.state;
        const { activeIndex} = this.state;
        // 获取 搜索曲谱 数据
        this.props.acquireSearchScoreData(activeIndex,1,page,searchText);
        // 设置页码
        this.setState({
            current: page || 1
        });
    }
    /**
     * 切换热门或者最新
     * @param {int} type   1 吉他谱 2 尤克里里
     * @param {int} state  0 热门 1 最新
     */
    handleSwitchType (type,state) {
        // 获取 隐藏的路由 参数
        const { searchText } = this.props.history.location.state;
        // 获取 搜索曲谱 数据
        this.props.acquireSearchScoreData(type,1,1,searchText);
        // 设置页码
        this.setState({
            current: 1
        });
        this.setState({
            activeIndex: type,
            headSearch: false
        });
    }
    // 打开网易七鱼
    openSdk () {
        if (window.ysf) {
            window.ysf('open');
        }
    }
    componentDidMount (){

        // 获取 隐藏的路由 参数
        const { categoryIndex, searchText } = this.props.history.location.state;
        console.log(categoryIndex, searchText,'.............222')
        const { current} = this.state;
        console.log(this.props.history.location.state)
        // 获取 搜索曲谱 数据
        this.props.acquireSearchScoreData(categoryIndex,1,current,searchText);
        this.setState({
            activeIndex: categoryIndex,
            depotText: searchText,
            depotCategory: categoryIndex,
            headSearch: true
        })
    }
    // 监听
    componentWillReceiveProps () {
        const { categoryIndex, searchText } = this.props.history.location.state;
        const { depotText , depotCategory } = this.state;
        // 当搜索的内容和仓库保存的内容不一致时，重新获取曲谱
        if (depotText !== searchText || depotCategory !== categoryIndex ) {
            // 获取 搜索曲谱 数据
            this.props.acquireSearchScoreData(categoryIndex,1,1,searchText);
            // 搜索内容改变后，仓库重新设置
            this.setState({
                current: 1,  
                activeIndex: categoryIndex,
                depotText: searchText,
                depotCategory: categoryIndex,
                headSearch: true
            })
        }
        
    }
}

const mapState = (state) => ({
    musicScore: state.scoreSearch.musicScore || [],
    scoreTotal: state.scoreSearch.scoreTotal || 0,
    categoryIndex: state.headNavbar.categoryIndex || 1,
    searchText: state.headNavbar.searchText || '',
});

const mapDispatch = (dispatch) => ({
    // 获取 搜索曲谱 数据
    /**
    * @param {int} type  	0 默认 1 吉他课 2 尤克里里
    * @param {int} state   1 热门 2 最新
    * @param {int} page    页码
    * @param {string} text    搜索文本
    */
    acquireSearchScoreData(type,state,page,text) {
        console.log(type,state,page,text)
        dispatch(actionCreators.acquireGrabbleMusicScoreData({
            actionType: actionTypes.Grabble_Music_Score_Data,
            type,
            state,
            page,
            size: 20,
            text
        }))
    }
});


export default connect(mapState, mapDispatch)(withRouter(ScoreSearch));